<template>
  <div>
    <card :bordered="false" dis-hover>
      <div class="ivu-pt-8 ivu-mb-16">
        <Input v-width="300" v-model="input" placeholder="请输入搜索内容" @on-enter="searchWord"></Input>
      </div>
      <Table :loading="loading" highlight-row :columns="columns" :data="list" border :max-height="550">
        <template slot="total" slot-scope="{row}">
          <a @click="openDrawer('total')">
            {{row.total}}
          </a>
        </template>
        <template slot="valid_count" slot-scope="{row}">
          <a @click="openDrawer('valid_count',row.valid_count)">
            {{row.valid_count}}
          </a>
        </template>
      </Table>

    </card>
    <Modal v-model="Modal" fullscreen :footer-hide="true" @on-cancel="cancel">
      <p slot="header">
        内容
      </p>
      <div>
        <Table highlight-row :columns="replyColumns" :data="replyList" border :max-height="550">
          <template slot="option" slot-scope="{row,index}">
            <div>
              <!-- 1：文字  2：图片 3：语音   4:视频消息  5：系统提示  8 : 文件 11:红包 12:转账 14 : 表情  20: 语音通话/视频通话 -->
              <!-- 文字和系统消息 -->
              <div
                  class="wechatchat"
                  v-if="
                      +row.contenttype === 1 ||
                      +row.contenttype === 5 ||
                      +row.contenttype === 8 ||
                      +row.contenttype === 19 ||
                      +row.contenttype === 20
                  "
                  v-html="row.content"
              ></div>
              <div v-if=" +row.contenttype === 14">{{row.content}}</div>
              <img :src="row.content" v-if="+row.contenttype === 2" style="width:150px;height:150px" @click="changeImg(row,index)"/>
              <!-- 语音 -->
              <audio
                  style="padding-top: 5px;"
                  :src="row.content"
                  controls
                  v-if="+row.contenttype === 3 && !row.show"
              ></audio>
                <Button
                  v-if="+row.contenttype === 3 && row.show"
                  type="primary"
                  :disabled="row.loading && row.show"
                  :loading="row.loading"
                  @click="toLoading(index)"
              >
                  <span v-if="!row.loading">加载音频</span>
                  <span v-else>加载中...</span>
              </Button>
            </div>
          </template>
        </Table>
      </div>
      <div class="ivu-mt ivu-text-center">
        <Page v-if="type === 'valid_count'" :current="page" @on-change="formSize" :total="total" show-elevator show-total/>
        <Page v-else :current="page" :page-size="pageSize" :page-size-opts='pageOpts' @on-change="formSize" @on-page-size-change="changepageSize" :total="total" show-total show-sizer  show-elevator/>
      </div>
    </Modal>
    <Modal v-model="modalStatus"  :footer-hide="true" @on-cancel="modalcancel">
      <img :src="modalImg">
    </Modal>
  </div>
</template>
<script>
    import { getWeChartCount, getWeChartList, getWeChartReply } from '../../api/TApi/index.js'
    import { customerwechatconverfile } from '@/api/hqapi/indexone.js';
    export default {
        data () {
            return {
                input: '',
                loading: false,
                copyInput: '',
                type: '',
                page: 1,
                Modal: false,
                pageSize: 10,
                total: 0,
                pageOpts: [10, 20, 30, 40], // 分页每页数量
                list: [],
                replyList: [],
                replyColumns: [],
                columns: [
                    {
                        title: '标题',
                        key: 'true_keyword',
                        tooltip: true
                    },
                    {
                        title: '发送量',
                        slot: 'total'
                    },
                    {
                        title: '回复量',
                        slot: 'valid_count'

                    }
                ],
                // 放大图片
                modalStatus: false,
                modalImg: ''
            }
        },
        methods: {
            cancel () {
                this.page = 1
            },
            openDrawer (type, num) {
                this.type = type
                switch (type) {
                case 'total': {
                    // 发送
                    this._getWeChartList()
                }; break;
                case 'valid_count': {
                    // 回复
                    this._getWeChartReply()
                    this.total = num
                }; break;
                }
            },
            // 回复
            _getWeChartReply () {
                let params = {
                    true_keyword: this.copyInput,
                    page: this.page
                }
                getWeChartReply(params).then(res => {
                    this.replyColumns = [
                        {
                            title: '发送内容',
                            key: 'first_content',
                            tooltip: true,
                            width: 250
                        },
                        {
                            title: '患者回复内容',
                            slot: 'option',
                            key: 'content',
                            tooltip: true,
                            width: 350
                        },
                        {
                            title: '发送微信号昵称',
                            key: 'wechatnick',
                            tooltip: true
                        },
                        {
                            title: '接受患者',
                            key: 'nickname'
                        },
                        {
                            title: '回复时间',
                            key: 'create_time',
                            tooltip: true
                        }
                    ]
                    // this.replyList = res.list.map(ee => {
                    //   return {
                    //     first_content: this.copyInput,
                    //     ...ee
                    //   }
                    // })
                    this.replyList = res.list.map(ee => {
                        if (ee.contenttype == 3) {
                            if (
                                ee.content.indexOf('.amr') !== -1 ||
                                ee.content.indexOf('.AMR') !== -1
                            ) {
                                ee.show = true;
                                ee.loading = false;
                                // console.log(ee, 'ee')
                            } else {
                                ee.show = false;
                            }
                        }
                        return {
                            first_content: this.copyInput,
                            ...ee
                        }
                    })
                    this.Modal = true
                })
            },
            // 发送
            _getWeChartList () {
                let params = {
                    true_keyword: this.copyInput,
                    page: this.page,
                    pageSize: this.pageSize
                }
                getWeChartList(params).then(res => {
                    this.replyColumns = [
                        {
                            title: '发送时间',
                            key: 'create_time',
                            width: 120
                        },
                        {
                            title: '发送内容',
                            slot: 'option',
                            key: 'content',
                            tooltip: true,
                            minWidth: 300
                        },
                        {
                            title: '微信号',
                            key: 'wechatid',
                            width: 250,
                            tooltip: true

                        },
                        {
                            title: '微信昵称',
                            key: 'wechatnick',
                            tooltip: true,
                            width: 300
                        },
                        {
                            title: '归属人',
                            key: 'weechtName',
                            width: 100
                        },
                        {
                            title: '患者微信号',
                            width: 250,
                            key: 'friendid',
                            tooltip: true
                        }
                    ]
                    this.total = res.total
                    this.replyList = res.list
                    this.Modal = true
                })
            },
            // 外层搜索
            searchWord () {
                if (this.input) {
                    let params = {
                        true_keyword: this.input
                    }
                    this.loading = true
                    getWeChartCount(params).then(res => {
                        this.list = [
                            {
                                true_keyword: this.input,
                                ...res
                            }
                        ]
                        this.copyInput = this.input
                    }).finally(() => {
                        this.loading = false
                    })
                } else {
                    this.$Message.error('请输入搜索内容')
                }
            },
            /* @函数功能: 分页 */
            formSize (e) {
                this.page = e;
                switch (this.type) {
                case 'total': {
                    this._getWeChartList()
                }; break;
                case 'valid_count': {
                    this._getWeChartReply()
                }; break;
                };
            },
            changepageSize (e) {
                this.pageSize = e
                switch (this.type) {
                case 'total': {
                    this._getWeChartList()
                }; break;
                case 'valid_count': {
                    this._getWeChartReply()
                }; break;
                };
            },
            // amr转换成可执行音频文件
            toLoading (index) {
                this.replyList[index].loading = true;
                this.replyList = JSON.parse(
                    JSON.stringify(this.replyList)
                );
                customerwechatconverfile({
                    id: this.replyList[index].id
                }).then((res) => {
                    this.replyList[index].content = res.content;
                    this.replyList[index].loading = false;
                    this.replyList[index].show = false;
                    this.replyList = JSON.parse(
                        JSON.stringify(this.replyList)
                    );
                });
            },
            changeImg (item, idx) {
                this.modalStatus = true
                this.modalImg = item.content
            },
            modalcancel () {
                this.modalStatus = false
                this.modalImg = ''
            }
        }
    }
</script>
